<template>
  <div class="merchant-data">
    <div class="merchant-data-top">
      <el-row class="clearfix" :gutter="30">
        <el-col :sm="24" :md="5" :lg="5">
          <div class="chart-box chart-box-border">
            <angle-arrow></angle-arrow>
            <data-title title="商家数据"></data-title>
            <div class="date-types">
              <ul>
                <li
                  v-for="(data, index) in dataTypes"
                  :key="index"
                  :class="{ active: dataTypesIndex == index }"
                  @click="choseDateType(index)"
                >
                  {{ data }}
                </li>
              </ul>
            </div>
            <ul class="user-data">
              <li v-for="(data, index) in merchantData" :key="index" @click="lookAllStore(index)">
                <p>{{ data.key }}</p>
                <i-count-up
                  :start="0"
                  :endVal="data.value"
                  :decimals="5"
                  :duration="2.5"
                ></i-count-up>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :sm="24" :md="7" :lg="7">
          <div class="chart-box chart-box-border">
            <angle-arrow></angle-arrow>
            <data-title title="商家占比"></data-title>
            <ring-round
              :pieDatas="storeRatio"
              height="calc(100% - 38px)"
              :index="bigRingRound"
            ></ring-round>
          </div>
        </el-col>
        <el-col :sm="24" :md="12" :lg="12">
          <div class="chart-box chart-box-border order">
            <angle-arrow></angle-arrow>
            <data-title title="订单成交量"></data-title>
            <div class="chart-select">
              <el-date-picker
                v-model="form2.year"
                type="month"
                placeholder="选择年月"
                @change="changeDateMonth($event, 3)"
                format="yyyy-MM"
                value-format="yyyy-MM"
                :clearable="false"
                popper-class="chart-data-select"
              >
              </el-date-picker>
              <div class="chart-datetype">
                <ul>
                  <li
                    :class="{ active: orderDataIndex == index }"
                    v-for="(data, index) in Dates.dataTypes"
                    :key="index"
                    @click="choseDatesType(index, 3)"
                  >
                    {{ data.label }}
                  </li>
                </ul>
              </div>
            </div>
            <line-chart
              :title="onLineData.title"
              :series="onLineData.series"
              :splitNumber="10"
              :xAxisData="orderAxis"
              :seriesIndex="0"
              top="50px"
              left="30px"
              right="30px"
              bottom="30px"
            >
            </line-chart>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="merchant-data-bottom">
      <el-row class="clearfix" :gutter="30">
        <el-col :sm="24" :md="12" :lg="12">
          <div class="chart-box chart-box-border time-data">
            <angle-arrow></angle-arrow>
            <data-title title="实时记录"></data-title>
            <!-- <div class="more" style="text-align: right">
              <a href="javascript:void(0);" style="color: #fff" @click="more"
                >查看更多</a
              >
            </div> -->
            <table-data :list="browseList" :step="0.5">
              <tr slot="table-head">
                <td
                  :width="browseWidthList[index]"
                  v-for="(item, index) in browseHeadList"
                  :key="index"
                >
                  <span>{{ item.text }}</span>
                </td>
              </tr>
              <div class="table-list" slot="table-list">
                <div
                  class="table-rwo"
                  v-for="(item, index) in browseList"
                  :key="index"
                >
                  <div :style="{ width: browseWidthList[0] }">
                    <span>{{ item.store_id }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[1] }">
                    <span>{{ item.store_name }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[2] }">
                    <span>{{ item.nickname }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[3] }">
                    <span>{{ item.price }} 元</span>
                  </div>
                  <div :style="{ width: browseWidthList[4] }">
                    <span>{{ item.count }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[5] }">
                    <span>{{ item.online_day }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[6] }">
                    <span>{{ item.rate_store_staff }} %</span>
                  </div>
                  <div :style="{ width: browseWidthList[7] }">
                    <span>{{ item.store_staff }}</span>
                  </div>
                </div>
              </div>
            </table-data>
          </div>
        </el-col>
        <el-col :sm="24" :md="12" :lg="12">
          <div class="chart-box chart-box-border merchant-num">
            <angle-arrow></angle-arrow>
            <data-title title="商家活跃数"></data-title>
            <!--            <double-pillar
              :title="orderTitle"
              :series="merchantNum"
              :dataAxis="orderAxis">
            </double-pillar> -->
            <line-chart
              :title="orderTitle"
              :series="merchantNum"
              :splitNumber="10"
              :xAxisData="orderAxis"
              :seriesIndex="0"
              top="50px"
              left="30px"
              right="30px"
              bottom="20px"
            >
            </line-chart>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Dates from "@/statistics/dates.json";
import ICountUp from "vue-countup-v2";
import angleArrow from "@/statistics/components/angle-arrow.vue";
import dataTitle from "@/statistics/components/data-title.vue";
import tableData from "@/statistics/components/map/table-data.vue";
import doublePillar from "@/statistics/components/double-pillar.vue";
import funnel from "@/statistics/components/merchant/funnel.vue";
import lineChart from "@/statistics/components/line-chart.vue";
import ringRound from "@/statistics/components/ring-round.vue";
import storesTable from "./stores-table";
import realTimeTable from "./real-time-table";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      Dates: Dates,
      //实时浏览记录头部
      browseHeadList: [
        {
          id: 0,
          text: "ID",
        },
        {
          id: 1,
          text: "商家名",
        },
        {
          id: 2,
          text: "跟单员",
        },
        {
          id: 3,
          text: "业绩",
        },
        {
          id: 4,
          text: "订单数",
        },
        {
          id: 5,
          text: "本月活跃天数",
        },
        {
          id: 6,
          text: "复购率",
        },
        {
          id: 7,
          text: "员工数量",
        },
      ],
      storeRatio: [],
      browseWidthList: [
        "12.5%",
        "15%",
        "12.5%",
        "12.5%",
        "12.5%",
        "12.5%",
        "10%",
        "12.5%",
      ], //实时浏览记录宽度
      browseList: [], //实时浏览记录
      orderTitle: [],
      order: [],
      orderAxis: [],
      dataTypes: ["今日", "本周", "上周", "本月", "上月", "今年", "去年"],
      dataTypesIndex: 3,
      merchantData: [
        {
          key: "增长订单量",
          value: 0,
        },
        {
          key: "增长订单金额",
          value: 0,
        },
        {
          key: "下单商家",
          value: 0,
        },
        {
          key: "商家增长数",
          value: 0,
        },
        {
          key: "商家活跃度",
          value: 0,
        },
        {
          key: "商家总数",
          value: 0,
        },
        {
          key: "店铺员工",
          value: 0,
        }
      ],
      onLineData: {
        title: ["今日在线人数", "昨日在线人数"],
        series: [],
      },
      form2: {
        year: new Date(new Date()).Format("yyyy-MM"),
      },
      orderDataIndex: 1,
      merchantNum: [],
      merchantAxis: [],
      bigRingRound: 0,
      layerIndex:'',
      layerIndex2:''
    };
  },
  components: {
    angleArrow,
    dataTitle,
    tableData,
    doublePillar,
    ICountUp,
    funnel,
    lineChart,
    ringRound,
  },
  methods: {
    // 获取商家基本数据
    getStoreBaseData(time) {
      let data = {
        time: time,
      };
      this.$http(this.$ptApiList.StoreBaseData, data).then((res) => {
        let ringRoundList = [];
        this.merchantData[0].value = res.datas.order_count_add;
        this.merchantData[1].value = res.datas.order_sum_add;
        this.merchantData[2].value = res.datas.order_store_num;
        this.merchantData[3].value = res.datas.store_count_add;
        this.merchantData[4].value = res.datas.online_store_num;
        this.merchantData[5].value = res.datas.all_store_num;
        this.merchantData[6].value = res.datas.all_store_staff;
        this.storeRatio.push({
          name: "商家比例",
          type: "pie",
          radius: "80%",
          center: ["50%", "50%"],
          label: {
            show: true,
            alignTo: "labelLine",
            bleedMargin: 5,
            formatter: function (e) {
              return (
                e["name"] +
                " \n " +
                ((e["data"].datas[0] / e["data"].datas[1]) * 100).toFixed(2) +
                "%"
              );
            },
          },
          avoidLabelOverlap: true,
          emphasis: {
            label: {
              show: true,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: true,
            length: 0,
            length2: 50,
            color: "#00ffff",
          },
          data: [
            {
              value: res.datas.return_store_num,
              name: "复购",
              itemStyle: {
                color: "#067cde",
              },
              datas: [res.datas.return_store_num, res.datas.all_store_num],
            },
            {
              value: res.datas.online_store_num,
              name: "活跃商家",
              itemStyle: {
                color: "#03f6fb",
              },
              datas: [res.datas.online_store_num, res.datas.all_store_num],
            },
            {
              value: res.datas.order_store_num,
              name: "成交商家",
              itemStyle: {
                color: "#fdce03",
              },
              datas: [res.datas.order_store_num, res.datas.all_store_num],
            },
          ],
        });
        ringRoundList.push(
          res.datas.return_store_num,
          res.datas.online_store_num,
          res.datas.order_store_num
        );
        this.bigRingRound = ringRoundList.indexOf(
          Math.max.apply(Math, ringRoundList)
        );
      });
    },
    // 获取某年某月所有天数
    getDaysInMonth(year, month) {
      month = parseInt(month, 10);
      var temp = new Date(year, month, 0);
      return temp.getDate();
    },
    // 订单成交量&商家数
    getStoreDataTable(type, colum) {
      let data = {};
      let yearDate,
        year,
        month,
        today,
        days = [];
      yearDate = new Date(Date.parse(this.form2.year));
      year = yearDate.getFullYear();
      month = yearDate.getMonth() + 1;
      today = new Date(new Date()).Format("d");
      let currentYear = new Date().getFullYear();
      let currentMonth = new Date().getMonth() + 1;
      let dayCount;
      if (currentYear == year && currentMonth == month) {
        dayCount = today;
      } else {
        dayCount = this.getDaysInMonth(year, month);
      }
      for (var i = 0; i < dayCount; i++) {
        days.push(i + 1 + "日");
      }
      data = {
        type: type,
        time: this.form2.year,
        page_type: 1,
        limit: 12,
        page: 0,
      };
      if (this.orderDataIndex == 1) {
        data.limit = this.getDaysInMonth(year, month) + 1;
      }
      let loadingInstance = Loading.service({
        text: "加载中",
        background: "rgba(255,255,255,.1)",
      });
      this.$http(this.$ptApiList.StoreDataTable, data)
        .then((res) => {
          loadingInstance.close();
          if (res.datas.order.length || res.datas.store.length) {
            if (this.orderDataIndex == 0) {
              this.orderAxis = [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ];
            } else {
              this.orderAxis = days;
            }
            let orderObj = {
              data: [],
              name: "订单成交量/万元",
              type: "line",
              smooth: true,
              itemStyle: {
                color: "#00fbf3",
              },
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0,251,243,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,251,243,.1)",
                  },
                ]),
              },
              label: {
                show: true,
                color: "#fdcf00",
                formatter: "{c}万元",
                fontSize: "14px",
              },
              lineStyle: {
                width: 4,
              },
              itemStyleArray: [
                {
                  offset: 0,
                  color: "#fff",
                },
                {
                  offset: 0.2,
                  color: "#067add",
                },
                {
                  offset: 1,
                  color: "transparent",
                },
              ],
            };
            let storeObj = {
              data: [],
              name: "商家活跃数",
              type: "line",
              smooth: true,
              itemStyle: {
                color: "#01e8ed",
              },
              lineStyle: {
                width: 4,
              },
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0,251,243,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,251,243,.1)",
                  },
                ]),
              },
              label: {
                show: true,
                formatter: "{c}",
                fontSize: "14px",
                position: "top",
                color: "#fdcf00",
              },
              itemStyleArray: [
                {
                  offset: 0,
                  color: "#fff",
                },
                {
                  offset: 0.2,
                  color: "#f9764c",
                },
                {
                  offset: 1,
                  color: "transparent",
                },
              ],
            };
            if (res.datas.order) {
              res.datas.order.forEach((item) => {
                orderObj.data.push((item.num / 10000).toFixed(2));
              });
            }
            if (res.datas.store.length) {
              let startMonth = 1;
              res.datas.store.forEach((item, index) => {
                if (index == 0) {
                  startMonth = item.add_time - 1;
                }
                for (let i = 0; i < startMonth; i++) {
                  storeObj.data[i] = 0;
                }
                storeObj.data.push(item.num);
              });
            }
            this.onLineData.series.push(orderObj);
            this.merchantNum.push(storeObj);
          } else if (!res.datas.order.length && !res.datas.store.pv.length) {
            if (this.orderDataIndex == 0) {
              this.$confirm(year + "年没有数据，请重新选择", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                showCancelButton: false,
              }).then(() => {});
            } else if (this.orderDataIndex == 1) {
              this.$confirm(
                year + "-" + month + "月没有数据，请重新选择",
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                  showCancelButton: false,
                }
              ).then(() => {});
            }
          }
        })
        .catch(() => {
          loadingInstance.close();
        });
    },
    choseDateType(index) {
      let time = "";
      this.storeRatio = [];
      switch (index) {
        case 0:
          time = "today";
          break;
        case 1:
          time = "week";
          break;
        case 2:
          time = "lastWeek";
          break;
        case 3:
          time = "month";
          break;
        case 4:
          time = "lastMonth";
          break;
        case 5:
          time = "year";
          break;
        case 6:
          time = "lastYear";
          break;
      }
      this.dataTypesIndex = index;
      this.getStoreBaseData(time);
    },
    // 选择年月
    changeDateMonth(e, index) {
      switch (index) {
        case 3:
          this.order = [];
          this.orderAxis = [];
          this.onLineData.series = [];
          this.merchantNum = [];
          if (this.orderDataIndex == 0) {
            this.getStoreDataTable(2);
          } else {
            this.getStoreDataTable(3);
          }
          break;
      }
    },
    // 选择日期类型
    choseDatesType(e, index) {
      switch (index) {
        case 3:
          this.orderDataIndex = e;
          this.onLineData.series = [];
          this.orderAxis = [];
          this.merchantNum = [];
          if (e == 0) {
            this.getStoreDataTable(2);
          } else {
            this.getStoreDataTable(3);
          }
          break;
      }
    },
    // 实时记录
    getStoreTable() {
      let data = {
        limit: 100,
        page: 0,
      };
      this.$http(this.$ptApiList.StoreTable, data).then((res) => {
        this.browseList = res.datas;
      });
    },
    // 计算整点进行请求数据
    initTime() {
      let time = 60 - new Date().getSeconds(); //获取距离整分时剩的秒数
      const timer = setTimeout(() => {
        time = 60;
        let minutes = new Date().getMinutes();
        if (minutes == 0) {
          this.initData();
        }
        // 每一分钟执行一次
        const timer2 = setInterval(() => {
          let minutes = new Date().getMinutes();
          if (minutes == 0) {
            this.initData();
          }
        }, time * 1000);
        // 页面销毁清除每分钟的定时器
        this.$once("hook:beforeDestroy", () => {
          clearInterval(timer2);
        });
        // 清除第一个定时器
        clearTimeout(timer);
      }, time * 1000);
      // 以防快速刷新时没清除定时器
      this.$once("hook:beforeDestroy", () => {
        clearTimeout(timer);
      });
    },
    // 清除数据
    initData() {
      this.storeRatio = [];
      this.onLineData.series = [];
      this.merchantNum = [];
      this.browseList = [];
      this.dataTypesIndex = 3;
      this.orderDataIndex = 1;
      this.form2.year = new Date(new Date()).Format("yyyy-MM");
      this.getStoreBaseData("month");
      this.getStoreDataTable(3);
      this.getStoreTable();
      this.$layer.close(this.layerIndex);
      this.$layer.close(this.layerIndex2);
    },
    // 获取商家数据分析
    lookAllStore(index){
      if(index == 0 || index == 1 || index == 3 || index == 6){
        return false;
      }
      this.layerIndex = this.$layer.iframe({
        content:{
          content:storesTable,//传递的组件对象
          parent:this,//当前的vue对象
          data:{}//props
        },
        area:['70%','60%'],
        title:'商家数据分析',
        maxmin:true,
        cancel:()=>{

        }
      })
    },
    // 查看更多实时数据
    more(){
      this.layerIndex2 = this.$layer.iframe({
        content:{
          content:realTimeTable,
          parent:this,
          data:{}
        },
        area:["70%","60%"],
        title:"实时记录",
        maxmin:true,
        cancel:()=>{}
      })
    }
  },
  mounted() {
    this.getStoreBaseData("month");
    this.getStoreDataTable(3);
    this.getStoreTable();
    this.initTime();
  },
};
</script>

<style lang="scss" scoped>
.merchant-data {
  .chart-select {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    justify-content: flex-end;
    /deep/ .el-date-editor,
    /deep/ .el-select {
      width: 120px;
      &:nth-child(n + 1) {
        margin-left: 10px;
      }
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        border-color: #02688e;
        background-color: #022672;
        color: #fff;
        &::-webkit-input-placeholder {
          color: #fff !important;
        }
      }
      .el-input__icon {
        line-height: 32px;
        color: #fff !important;
      }
    }
  }
  .chart-datetype {
    margin-left: 10px;
    ul {
      display: flex;
      align-items: center;
      border: solid 1px #02688e;
      border-radius: 5px;
      background-color: #022672;
      overflow: hidden;
      li {
        color: #fff;
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
        cursor: pointer;
        &:first-child {
          border-right: solid 1px #02688e;
        }
        &.active {
          background-color: #00fbfc;
          color: #141414;
        }
      }
    }
  }
  .chart-box {
    position: relative;
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    &::before,
    &::after {
      content: " ";
      position: absolute;
      top: 0;
      left: 50%;
      width: 199px;
      height: 2px;
      transform: translateX(-50%);
      background: url("../../../assets/data-images/tabs-light.png");
    }
    &::after {
      top: initial;
      bottom: 0;
    }
  }
  .clearfix {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }
  .chart-box-border {
    background-color: #0f1e53;
    border: solid 1px rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 252, 252, 0.3) inset;
  }
  .merchant-data-top {
    position: absolute;
    left: 25px;
    right: 25px;
    top: 25px;
    height: calc(50% - 25px);
    .date-types {
      margin: 0 auto;
      width: 85%;
      height: 22px;
      line-height: 20px;
      border: solid 1px #277c9a;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      ul {
        display: flex;
        align-items: center;
        li {
          position: relative;
          flex: 1;
          text-align: center;
          cursor: pointer;
          color: #fff;
          position: relative;
          z-index: 2;
          font-size: 12px;
          transition: all 0.2s;
          &.active {
            color: #030e39;
            background-color: #00fbfc;
            &::after {
              background-color: #00fbfc;
            }
          }
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 1px;
            height: 10px;
            background-color: #277c9a;
          }
          &:last-child {
            &::after {
              width: 0px;
            }
          }
        }
      }
    }
    .user-data {
      width: 85%;
      height: calc(100% - 70px);
      display: flex;
      flex-wrap: wrap;
      margin: 10px auto 0;
      justify-content: space-between;
      li {
        width: calc((100% - 20px) / 2);
        height: calc((100% - 40px) / 4);
        border-radius: 5px;
        border: solid 1px #00ffff;
        box-shadow: 0 0 15px rgba(0, 252, 252, 0.9) inset;
        padding: 5px 10px;
        margin-top: 5px;
        cursor: pointer;
        p {
          font-size: 14px;
          color: #fff;
        }
        span {
          font-size: 24px;
          font-weight: bold;
        }
        &:nth-child(1) span {
          color: #fdcf00;
        }
        &:nth-child(2) span,
        &:nth-child(6) span {
          color: #00fbfc;
        }
        &:nth-child(3) span {
          color: #07eda6;
        }
        &:nth-child(4) span,
        &:nth-child(7) span {
          color: #f9764c;
        }
        &:nth-child(5) span {
          color: #7ebbff;
        }
      }
    }
    .order {
      /deep/ .data-title {
        position: relative;
        overflow: visible;
        &::before {
          content: " ";
          position: absolute;
          bottom: -35px;
          left: 50%;
          transform: translateX(-50%);
          background-image: url("../../../assets/data-images/merchant-line.png");
          background-size: 100% auto;
          background-repeat: no-repeat;
          z-index: 9;
          height: 32px;
          width: 80%;
        }
      }
    }
  }
  /deep/ .line-chart {
    box-shadow: none;
  }
  .merchant-data-bottom {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    height: calc(50% - 50px);
    margin-top: 25px;
    .merchant-num {
      /deep/ .data-title {
        position: relative;
        overflow: visible;
        &::before {
          content: " ";
          position: absolute;
          bottom: -35px;
          left: 50%;
          transform: translateX(-50%);
          background-image: url("../../../assets/data-images/merchant-line.png");
          background-size: 100% auto;
          background-repeat: no-repeat;
          z-index: 9;
          height: 32px;
          width: 80%;
        }
      }
      /deep/ .Page {
        box-shadow: none;
      }
    }
    .time-data {
      /deep/ .table-header {
        tr {
          background-color: #0e2f60;
        }
      }
    }
  }
}
</style>